<template>
  <div class="testbox">
    <div v-if="showAddTableColBtn">
      <el-button v-if="!editTableSate" @click="editTableBtn" size="mini" icon="el-icon-edit">编辑</el-button>
      <div v-else style="margin-left: auto;display:flex;">
        <el-button @click="addTableColBtn" size="mini" icon="el-icon-plus">新增列</el-button>
        <el-button @click="saveTableBtn" size="mini" icon="el-icon-upload">提 交</el-button>
      </div>
    </div>
    <!-- 表格标题 -->
    <div class="tabletitle-class" v-if="detailTableData.title">{{ detailTableData.title }}</div>
    <!-- 表格  -->
    <div class="fatherTable" :style="{ overflow: overflow, pointerEvents: pointerEvents, }">
      <table border="1">
        <tr>
          <!-- 表头内容 -->
          <th v-for="(thItem, index) in detailTableData.ths" :key="'th-' + index" :rowspan="thItem.rowspan"
            :colspan="thItem.colspan" :style="{
              width: thItem.width || 'auto', height: thItem.height || 'auto', backgroundColor: thItem.backgroundColor || '#fff', color: thItem.color || '#434343',
              fontSize: thItem.fontSize || '12px', fontWeight: thItem.fontWeight || '700', textAlign: thItem.textAlign || 'center',
            }">

            <!-- 支持渲染模板字符串 -->
            <div v-if="thItem.htmlStr && thItem.htmlStr.isShow" v-html="thItem.htmlStr.value"></div>

            <!-- 支持显示输入框 -->
            <input v-else-if="thItem.input && thItem.input.isShow" v-model="thItem.input.value"
              :type="thItem.input.type || 'text'" :placeholder="thItem.input.placeholder || '请输入'"
              :step="thItem.input.step || 1" :style="{
                width: thItem.input.width || '100%', height: '100%', textAlign: thItem.input.textAlign || 'center',
                color: thItem.input.color || '#000',
              }" :disabled="thItem.input.disabled">

            <!-- 纯文本 -->
            <span v-else> {{ thItem.thName }}</span>

          </th>

          <!-- 编辑下的表头内容 -->
          <th v-for="(newThItem, newindex) in newTableData.ths" :key="newindex" :id="'test' + newindex">
            <input v-if="newThItem.isEdit && editTableSate" v-model="newThItem.thName" placeholder="请输入表头"
              :style="{ textAlign: 'center', width: '100%', height: '100%', fontSize: '12px', }">
            <span v-else>{{ newThItem.thName }}</span>
          </th>

        </tr>
        <tr v-for="rowIndex in detailTableData.tdRows" :key="rowIndex">
          <!-- 表体内容 -->
          <td v-for="(tdItem, colIndex) in detailTableData.tds[rowIndex - 1]" :key="'td-' + rowIndex + '-' + colIndex"
            :rowspan="tdItem.rowspan" :colspan="tdItem.colspan" :style="{
              width: tdItem.width || 'auto', height: tdItem.height || 'auto', backgroundColor: tdItem.backgroundColor || '#fff', color: tdItem.color || '#434343',
              fontSize: tdItem.fontSize || '12px', fontWeight: tdItem.fontWeight || '700', textAlign: tdItem.textAlign || 'center',
            }">

            <!-- 支持渲染模板字符串 -->
            <div v-if="tdItem.htmlStr && tdItem.htmlStr.isShow" v-html="tdItem.htmlStr.value"></div>

            <!-- 支持显示输入框 -->
            <input v-else-if="tdItem.input && tdItem.input.isShow" v-model="tdItem.input.value"
              :type="tdItem.input.type || 'text'" :placeholder="tdItem.input.placeholder || '请输入'"
              :step="tdItem.input.step || 1" :style="{
                width: tdItem.input.width || '100%', height: '100%', textAlign: tdItem.input.textAlign || 'center',
                color: tdItem.input.color || '#000',
              }" :disabled="tdItem.input.disabled">

            <!-- 纯文本 -->
            <span v-else> {{ tdItem.tdName }}</span>

          </td>
          <!-- 编辑下的表体内容 -->
          <td v-for="(newTdItem, newColIndex) in newTableData.tds[rowIndex - 1]" :key="newColIndex">
            <input v-if="newTdItem.isEdit && editTableSate" v-model="newTdItem.tdName" placeholder="请输入"
              :style="{ textAlign: 'center', width: '100%', height: '100%', fontSize: '12px', }">
            <span v-else>{{ newTdItem.tdName }}</span>
          </td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    pointerEvents: {
      type: String,
      default: 'auto',//全表格禁用鼠标：none 禁用，auto 不禁用
    },
    overflow: {
      type: String,
      default: 'auto'
    },
    showAddTableColBtn: {
      type: Boolean,
      default: true
    },
    // 安全表格固定数据;ID: 6
    SafetyTableData: {
      type: Object,
      default: {
        tdRows: 10,//除表头的tbody所占行数
        title: '李向阳封装的无序表格',
        // 表头
        ths: [
          {
            thName: '2024年',
            colspan: 1,
            rowspan: 1,
            isEdit: false,
            width: '100px',
            htmlStr: {
              isShow: false,
              value: '&nbsp;'
            },
          },
          {
            thName: '季度任务（含缺货、关账发货）',
            colspan: 4,
            rowspan: 1,
            isEdit: false,
            width: '100px',
            height: '40px',
            // backgroundColor: '#fff',
            // color: '#0099ff',
            input: { isShow: false, value: 0, type: 'number', placeholder: '请输入', step: 0.01, color: '#000' },
          },
          {
            thName: '产品大类任务（关账销量）',
            colspan: 5,
            rowspan: 1,
            isEdit: false,
            width: '100px',
          },
          {
            thName: '单位：元',
            colspan: 1,
            rowspan: 1,
            isEdit: false,
            width: '100px',
          },
        ],
        // 表体
        tds: [
          //表体单元格充当第一行表头
          [
            // 表体单元格充当左上角空格
            {
              tdName: '1', colspan: 1, rowspan: 3, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: '#0099ff',
              // input: { isShow: true, value: 0, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'red' },
              htmlStr: { isShow: true, value: '&nbsp;' },
            },
            // 表体单元格充当第一行表头:一个小技巧，每一行的高度取决于最高的单元格的高度，因此写一个height就行了
            { tdName: '一季度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', height: '40px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '二季度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '三季度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '四季度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: 'PPR', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: 'PVC', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '新风', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '暖通大类', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '防水', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
            { tdName: '年度', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef', },
          ],
          // 表体单元格充当第1行数据行
          [
            {
              tdName: '1', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 1, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            // 注意：禁用输入框的情况下背景颜色才生效
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第2行数据行
          [
            {
              tdName: '1', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 1, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第3行数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '签约任务', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 11, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第4行数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '提前锁单', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 11, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第5行数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '特殊申请', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: false, color: 'green' },
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 11, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第6行数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '季度完成量', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 11, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
          // 表体单元格充当第7行数据行：用每一行的第一个单元格充当左侧表头哦
          [
            {
              tdName: '差额', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '700', color: '#000', backgroundColor: '#efefef',
            },
            {
              tdName: '2', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 2, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '3', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 3, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '4', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 4, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '5', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 5, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '6', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 6, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '7', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 7, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '8', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 8, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '9', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 9, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '10', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 10, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
            {
              tdName: '11', colspan: 1, rowspan: 1, isEdit: false, width: '100px', fontSize: 'small', fontWeight: '400', color: 'red', backgroundColor: '#efefef',
              input: { isShow: true, value: 11, type: 'number', placeholder: '请输入', step: 0.01, disabled: true, color: 'green' },
            },
          ],
        ],
      },
    }

  },
  data() {
    return {
      detailTableData: {},//表格显示的数据
      newTableData: { ths: [], tds: [], }, // 初始包含一个空数组
      newThObj: { thName: '', colspan: 1, rowspan: 1, isEdit: true, },
      newTdObj: { tdName: '', colspan: 1, rowspan: 1, isEdit: true, },
      editTableSate: false,//表格编辑状态
    };
  },
  created() {

  },
  computed: {

  },
  mounted() {
    let _this = this
    this.detailTableData = _this._props.SafetyTableData;
  },
  methods: {
    // 编辑表格按钮
    editTableBtn() {
      this.editTableSate = true;
    },
    // 新增列的点击事件
    addTableColBtn() {
      // 向 newTableData.ths 添加一个新的表头对象
      this.newTableData.ths.push({ ...this.newThObj });

      // 如果 tds 为空，需要初始化它
      if (this.newTableData.tds.length === 0) {
        for (let i = 0; i < this.detailTableData.tdRows; i++) {
          this.newTableData.tds.push([]);
        }
      }

      // 遍历每一行，添加空单元格以匹配表头列数
      this.newTableData.tds.forEach(row => {
        row.push({ ...this.newTdObj });
      });
    },
    // 保存表格的点击事件
    saveTableBtn() {
      // 反向遍历以避免删除元素时影响索引 -- 以表头为准，若表头为空，则提交后对应列为空
      for (let i = this.newTableData.ths.length - 1; i >= 0; i--) {
        if (!this.newTableData.ths[i].thName) {
          let shouldDeleteColumn = true;
          for (let row = 0; row < this.newTableData.tdRows; row++) {
            if (this.newTableData.tds[row][i].tdName) {
              shouldDeleteColumn = false;
              break;
            }
          }
          // 如果该列满足删除条件，则删除
          if (shouldDeleteColumn) {
            this.newTableData.ths.splice(i, 1);
            this.newTableData.tds.forEach(row => {
              row.splice(i, 1);
            });
          }
        }
      }
      this.saveTableDataFun();
    },
    // 保存表格数据函数
    async saveTableDataFun() {
      var data = [];
      if (this.newTableData.ths.length) {
        data = this.transformTableData(this.newTableData, 'Safety');
      }
      console.log('data:', data);
      this.editTableSate = false;
    },
    /**
     * 用于表格封装方法
     * @param {*object} newTableData:{ths:[],tds:[],} 
     * @param {*string} type
     * @returns {*array} array:[{SORT:'',TIME:'',Cells1:'',Cells2:'',Cells3:'',}]
     */
    transformTableData(newTableData, type) {
      const transformedData = [];
      newTableData.ths.forEach((th, index) => {
        const thName = th.thName;
        const colIndex = index;
        var transformedObj = {};
        switch (type) {
          case 'Safety'://安全
            transformedObj = {
              SORT: (colIndex + 1).toString(),//列数
              TIME: thName,//表头内容
              Cells1: newTableData.tds[0][colIndex].tdName,//单元格内容1
              Cells2: newTableData.tds[1][colIndex].tdName,//单元格内容2
              Cells3: newTableData.tds[2][colIndex].tdName//单元格内容3
            };
            break;
          default:
            break;
        }
        transformedData.push(transformedObj);
      });
      return transformedData;
    },
    /**
     * 用于将获取数据返回至符合表格的封装方法
     * @param {*array} data:[{SORT:'',TIME:'',Cells1:'',Cells2:'',Cells3:'',}]
     * @returns {*object} newTableData:{ths:[],tds:[],} 
     */
    transformData(data) {
      // 初始化 newTableData 结构
      let newTableData = {
        ths: [],
        tds: []
      };
      // 提取所有的列名，除了 "SORT" 和 "TIME"、"ID",因为这三个是固定的
      const columns = Object.keys(data[0]).filter(key => key !== "SORT" && key !== "TIME" && key !== "ID");
      // 填充 ths 数组
      newTableData.ths = data.map(item => ({
        thName: item.TIME,
        colspan: 1,
        rowspan: 1,
        isEdit: true
      }));
      // 填充 tds 数组
      for (let column of columns) {
        let columnData = data.map(item =>
        (
          {
            tdName: item[column],
            colspan: 1,
            rowspan: 1,
            isEdit: true
          }
        )
        );
        // 将每个字段的值按顺序插入 tds 数组
        newTableData.tds.push([...columnData]);
      }
      return newTableData;
    },
    // 打印数据
    logData() {
      let _this = this
      console.log('logData SafetyTableData:', _this._props.SafetyTableData);

    },
  },
  watch: {

  }
};
</script>

<style scoped>
.testbox {
  width: 100%;
  height: 100%;
}

.fatherTable table {
  border-collapse: collapse;
  width: 100%;
}

.fatherTable table th,
td {
  border: 1px solid #ddd;
}

.tabletitle-class {
  background: #0099ff;
  color: #fff;
  margin: 0.5% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  font-weight: bold;
  letter-spacing: 2px;
}
</style>
